<template>
  <div>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in bannerPicUrl"
          :key="item.id"
          @click="bannerDetail(item)"
        >
          <img :src="item.img" class="banner-img" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div
      class="content"
      v-for="r in recommendAPI"
      :key="r['comic_id']"
      @click="comicDetail(r)"
    >
      <div class="content-img">
        <img :src="r.img" alt="" />
      </div>
      <div class="content-text">
        <p class="text-item">
          <span class="content-title">{{ r.title }}</span>
          <span class="content-desc">{{ r.styles[0].name }}</span>
        </p>
        <p class="sub-title">
          <span class="one">{{ r["sub_title"] }}</span>
          <span class="icon"><van-icon name="chat-o" /></span>
          <span>{{ r["comment_total"] | playvolume }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerPicUrl: [],
      recommendAPI: [],
    };
  },
  methods: {
    async getBannerPicUrl() {
      let { data } = await this.$http("https://apis.netstart.cn/bcomic/Banner");

      this.bannerPicUrl = data.data;

      // console.log(this.bannerPicUrl);
    },
    async getRecommendAPI() {
      let { data } = await this.$http(
        "https://apis.netstart.cn/mbcomic/HomeRecommend"
      );
      this.recommendAPI = data.data.list;
    },
    comicDetail(r) {
      this.id = r["comic_id"];
      this.$router.push({ path: "/comic_id=" + this.id });
    },
    bannerDetail(item) {
      this.id = item.id;
      this.$router.push({ path: "/comic_id=" + this.id });
    },
  },
  filters: {
    playvolume(arg) {
      if (arg.toString().length > 4) {
        const volume = arg / 10000;
        const realVal = parseFloat(volume).toFixed(2);
        return realVal + "w";
      } else {
        return arg;
      }
    },
  },

  mounted() {
    this.getBannerPicUrl();
    this.getRecommendAPI();
  },
};
</script>
<style lang="scss" scoped>
.banner {
  width: 343px;
  height: 174px;
  padding: 16px;
  display: flex;
  margin: 0 auto;
  .my-swipe {
    border-radius: 5px;
  }
  .van-swipe-item {
    width: 375px;
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
}
.content {
  width: 343px;
  height: 246px;
  padding: 0 16px 20px;
  margin: 0 auto;
  .content-img {
    width: 343px;
    height: 192px;
    img {
      width: 100%;
      border-radius: 5px;
      margin-bottom: 4px;
    }
  }
  .text-item {
    margin-top: 4px;
    margin-bottom: 0;
    .content-title {
      height: 27px;
      font-size: 20px;
      color: #212121;
      line-height: 28px;
    }
    .content-desc {
      color: #90959b;
      font-size: 12px;
      background-color: rgba(192, 192, 192, 0.16);
      padding: 1px 4px;
      border-radius: 3px;
      margin-left: 7px;
    }
  }
  .sub-title {
    color: #999;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    display: flex;
    .one {
      flex: 1;
    }
    .icon {
      margin-right: 4px;
    }
  }
}
</style>